import React,{Component} from "react";
import "./view.css"

import {Link} from "react-router-dom"
// 引入轮播图组件
import Swip from "../../containers/bannerContainer"

import { Tabs, WhiteSpace, Badge } from 'antd-mobile';

const tabs = [
    { title: <Badge >新碟</Badge> },
    { title: <Badge >新歌</Badge> },
   
  ];


class View extends Component {
    constructor(){
        super();
        this.state={
            getNewEdit:[],
            getNewSong:[]
        }
    }

    componentDidMount(){
    //    console.log(this.props)
       this.props.getrecomSong();
    //    console.log(this.props)
       //新专辑
       let getNewEdit = this.props.getNewEditList().then(res=>{
            //   console.log(res.data.albums)
            this.setState({
                getNewEdit:res.data.albums
            })
       });

       //新歌歌单调用container传来的axios请求
       this.props.getNewSongList().then(res=>{
          
           this.setState({
                getNewSong:res.data.result.splice(0,3)
           })
       });

    }

    render(){
        // console.log(this.props)
        let {SongList} =this.props
        // console.log(SongList)
        

        let {getNewEdit,getNewSong} = this.state;
       
        // console.log(getNewEdit)
        return(
            <div className="view">
                 
                 <Swip />
                 <div className="Bar">
                     <Link to="/daily">
                          <span className="iconfont">&#xe636;</span>
                           <i>每日推荐</i>
                     </Link>
                     <Link to="/SongList">
                          <span className="iconfont">&#xe66a;</span>
                           <i>歌单</i>
                    </Link>
                    <Link to="/Range">
                          <span className="iconfont">&#xe642;</span>
                           <i>排行榜</i>
                    </Link>
                    <Link to="/FM">
                          <span className="iconfont">&#xe60f;</span>
                           <i>电台</i>
                    </Link>
                 </div>
                <div className="recommendSong">
                    
                    <div className="rsHeader">
                          <h2>推荐歌单</h2>
                          <span>歌单广场</span>
                    </div>
                    <div className="rsMain">
                    {SongList.map(item=>{
                        return  <Link to={{pathname:"/detailSongList",state:{item}}} key={item.id}>
                                    <div className="rsMainImg">
                                        <img src={item.picUrl} />
                                    </div>
                                    <h5>{item.name}</h5>
                                    <div className="rightTop">
                                       <span className="iconfont broadCast">&#xe631;</span>
                                        {/* {String(parseInt(item.playCount))} */}
                                        <i>{String(parseInt(item.playCount)).length===7?String(parseInt(item.playCount)).slice(0,3):(String(parseInt(item.playCount)).length===8?String(parseInt(item.playCount)).slice(0,4):String(parseInt(item.playCount)).slice(0,2))}</i><i>万</i>
                                    </div>
                                   
                                </Link>
                    })}
                      
                    
                       

                    </div>
                    
                </div>

                <div className="newSong">
                     <Tabs tabs={tabs} initialPage={0} animated={false} useOnPan={false}>
                     <div className="tabInner">
                              
                               {getNewEdit.map(item=>{
                                   return (
                                        <Link to="recomdSong" key={item.id}>
                                                <span className="rsMainImg">
                                                    <img src={item.picUrl} />
                                                </span>
                                                <div className="imgContent">
                                                     <h6>{item.name}</h6>
                                                     <h5>{ item.artist.name}</h5>
                                                    
                                                </div>
                                                
                                               
                                        </Link>
                                    )
                               })}
                                
                                {/* <Link to="recomdSong">
                                    <span className="rsMainImg">
                                        <img src="http://p1.music.126.net/Hvi3Qo4XVy6gPHeTDN4sIA==/109951163796209328.jpg?param=140y140" />
                                    </span>
                                    <h6>2018年度最热新歌TOP100</h6>
                                </Link> */}
                    </div>
                    <div className="tabInner">
                              {getNewSong.map(item=>{
                                //   console.log(item)
                                   return (
                                        <Link to="recomdSong" key={item.id}>
                                                <span className="rsMainImg">
                                                    <img src={item.song.album.picUrl} />
                                                </span>
                                                <h6>{item.song.album.name}</h6>
                                            
                                        </Link>
                                    )
                               })}
                            
                    </div>
                    </Tabs>
                  <WhiteSpace />
                </div>
            </div>    
        )
    }
}

export default View